<template>
    <el-tabs v-model="activeName" stretch="true" @tab-click="tabClick">
        <el-tab-pane v-for="(item,index) in titles" :key="index" :label="item.title" :name="item.tName" class="tabPane">
            <goods-list :goods="agoods"></goods-list>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import {onMounted, reactive, toRefs} from "vue";
import GoodsList from "@/components/goodsList/GoodsList";

export default {
    components: {GoodsList},
    props: {
       titles:{
           type:Array,
           default(){
               return []
           }
       },
        agoods:{
            type: Array,
            default(){
                return []
            }
        }

   },
    setup(props,{emit}){
       const state = reactive({
           activeName: ''
       })
        onMounted(()=>{
            state.activeName = props.titles[0].tName
        })
        const tabClick = (tab) => {
          emit('tabclick',tab.index)
        }
        return {
           ...toRefs(state),
            tabClick,
        }
    }
}
</script>

<style>
.el-tabs{
    width: 100%;
}
</style>
